<template>
    <div>
      <el-row :gutter="20">
        <el-col :span="8" style="font-size: larger">第一部分保留<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
          <div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"  style="font-size: larger">第二部分保留
          <div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <div  style="text-align: center">
            <el-progress type="circle" stroke-width="15" width="200" :percentage="seconds"></el-progress>
            <h4 v-show="isShow2">后台正在帮你优化模型，请稍后...</h4>
          </div>

        </div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"  style="font-size: larger">第三部分保留<div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"  style="font-size: larger">第四部分保留<div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8" >
          <div class="grid-content bg-purple" style="text-align: center">
          <el-button v-show="isShow1" type="primary" @click="delay()">模型建立与优化</el-button>
          </div>
          <div v-show="isShow3" style="text-align: center;font-size: large;color: #5daf34">模型已建立并完成优化</div>
        </el-col>
      </el-row>


    </div>
</template>

<script>
    export default {
       name: "first",
      data(){
          return {
            isShow1: true,
            isShow2: false,
            isShow3: false,
            seconds: 0
          }
      },
      methods: {
        delay: function () {
          this.isShow1=false;
          this.isShow2=true;
          let interval = setInterval(()=>{
            this.seconds++;
            if(this.seconds >= 100){
              clearInterval(interval);
              this.isShow2=false;
              this.isShow3=true;
              this.$router.push({ path: '/BRB/second' })
            }
          },100)
        }
      }
    }
</script>

<style scoped>

</style>
